<template>
  <div class="login flex justify-center items-center">
    <div class="w-[385px] bg-[#fff] p-[25px] pb-[5px] rounded-[6px]">
      <h3 class="text-center text-[#707070] mb-[30px] font-[700] text-[18px]">
        后台管理系统
      </h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="medium">
        <el-form-item prop="userName">
          <el-input v-model="ruleForm.userName">
            <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" type="password">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div class="flex">
            <el-input v-model="ruleForm.code">
              <i slot="prefix" class="el-input__icon el-icon-circle-check"></i>
            </el-input>
            <div class="w-[100px] ml-[30px] flex-shrink-0 cursor-pointer" @click="getAuthCode">
              <img :src="imgSrc" alt="" />
            </div>
          </div>
        </el-form-item>
        <el-form-item class="mb-[10px]">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" class="w-full">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// login 验证码
import { authLogin, authCode } from '@/api/login'
// 密码加密
import { encrypt } from '../utils/jsencrypt'
// 本地 Cookie 存储
import Cookie from 'js-cookie'
export default {
  name: 'login',
  components: {},
  data () {
    return {
      rememberMe: false,
      imgSrc: '', // 验证码
      ruleForm: {
        userName: '', // 用户名
        password: '', // 密码
        code: '', // 验证码
        uuid: '' // 校验验证码
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 获取验证码
    this.getAuthCode()
    // 获取记住状态
    this.rememberMe = Cookie.get('rememberMe') === 'true'
    this.ruleForm.userName = Cookie.get('userName')
    this.ruleForm.password = Cookie.get('password')
  },
  methods: {
    // 获取验证码
    async getAuthCode () {
      const { data: { uuid, img } } = await authCode()
      this.imgSrc = img
      this.ruleForm.uuid = uuid
    },
    // 登录
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            // 当前状态是否经过加密
            const bool = Cookie.get('rememberMe') === 'true'
            const params = JSON.parse(JSON.stringify(this.ruleForm))
            if (!bool) {
              params.password = encrypt(this.ruleForm.password)
            } else {
              console.log(222)
            }
            const { data: { token, user } } = await authLogin(params)
            Cookie.set('token', token)
            // 当前记录密码的状态
            Cookie.set('rememberMe', this.rememberMe)
            // 是否需要记住密码
            if (this.rememberMe) {
              Cookie.set('userName', params.userName, { expires: 1 })
              Cookie.set('password', params.password, { expires: 1 })
            }
            localStorage.setItem('user', JSON.stringify(user))
            localStorage.setItem('token', token)
            this.$router.push('/dashboard')
          } catch (e) {
            this.getAuthCode()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  background: url(../assets/background.9b952c4a.jpg) no-repeat;
  height: 100%;
  background-size: cover;
}
</style>
